<template>
  <div>
    <div class="blog-contain">
      <div
        v-for="(item, index) in commentList"
        :key="index"
        class="blog-container"
      >
        <div class="blog-meta">
          <div class="blog-content">评论内容：{{ item.content }}</div>
          <div>
            <span class="meta-item" @click="delComment(item.id)"
              ><i class="el-icon-delete" />
            </span>
          </div>
        </div>

        <div class="blog-meta">
          <div class="blog-title" @click="toInfo(item.blogId)">
            {{ item.blogTitle }}
          </div>
          <div class="comment-time">{{ item.createdTime }}</div>
        </div>
      </div>
      <el-pagination
        class="pageable-container"
        background
        :current-page="params.page"
        :page-sizes="[10, 20, 30]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="commentList.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 删除评论 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确定要删除这条评论吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="deleteComment"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 删除评论结束 -->
  </div>
</template>

<script>
import { getByPage, deleteById } from "@/api/blog-comment";
export default {
  data() {
    return {
      params: {
        page: 1,
        limit: 10,
      },
      commentList: [],
      dialogVisible: false,
      commentId: null,
    };
  },
  created() {
    this.getByPage();
  },
  methods: {
    handleSizeChange(val) {
      this.params.limit = val;
    },
    handleCurrentChange(val) {
      this.params.page = val;
    },
    getByPage() {
      getByPage(this.params).then((res) => {
        this.commentList = res.data;
        this.count = parseInt(res.count);
      });
    },
    // 跳转到详情
    toInfo(id) {
      this.$router.push("/blogInfo/" + id);
    },
    // 打开删除弹窗
    delComment(id) {
      this.dialogVisible = true;
      this.commentId = id;
    },
    // 删除
    deleteComment() {
      deleteById(this.commentId).then((res) => {
        this.dialogVisible = false
        this.getByPage()
        this.$message.success(res.data);
      });
    },

  },
};
</script>

<style scoped>
.blog-container {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 70px;
  border-bottom: 1px solid #e6ebf5;
}

.blog-content {
  text-align: left;
  font-size: 12px;
  color: #a3a3a3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-title {
  font-weight: 600;
}
.blog-title:hover {
  cursor: pointer;
  color: #555666;
}

.el-icon-delete {
  color: #a3a3a3;
}

.el-icon-delete:hover {
  cursor: pointer;
  color: #555666;
}

.comment-time {
  font-size: 12px;
  color: #a3a3a3;
}
.blog-meta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
